<template>
  <div>
    <router-link 
    v-if="$route.path !== '/time-entries/log-time'"
    to = "/time-entries/log-time"
    class="btn btn-primary">Create</router-link>

    <h3 v-if="$route.path === '/time-entries/log-time'"><strong>Create</strong></h3>

    <hr>
    <router-view></router-view>

    <h3 v-if="!taskCount">No tasks</h3>

    
    <div class="list-group">
      <!-- 注意此处应使用 a 元素，这样鼠标移动其上时会自动变换背景色 -->
      <a v-for="(item, index) in tasks" class="list-group-item">
        <div class="row">
          <div class="col-sm-2 user-title">
            <img :src="item.avatar" class="avatar img-circle img-responsive">
            <p class="text-center"> 
              <strong>
                {{ item.name }}
              </strong>
            </p>
          </div>
          <div class="col-sm-3 text-center">
            <h3 class="text-center"><span class="glyphicon glyphicon-time"></span> {{ item.totalTime }}</h3>
            <p class="label label-primary text-center"><span  class="glyphicon glyphicon-calendar"></span> {{ item.date }}</p>
          </div>
          <div class="col-sm-7">
            <!-- .close 会使关闭按钮自动占用一列空间 -->
            <div class="close" @click="delTask(index)" >&times</div>
            <div class="comment-area">{{ item.comment }}</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    computed: mapState({
      // 等同于下面的【代码段1】
      tasks: 'list',
      // 等同于下面的【代码段2】
      taskCount: state => state.list.length
    }),
    // {
    //  【代码段1】
    //   tasks () {
    //     return this.$store.state.list
    //   },
    //  【代码段2】
    //   taskCount () {
    //     return this.$store.state.list.length
    //   }
    // },
    methods: {
      delTask (idx) {
        // 减去总时间
        this.$store.dispatch('decTotalTime', this.tasks[idx].totalTime)
        // 删除该计划
        this.$store.dispatch('delTask', idx)
      }
    }
  }
</script>

<style>
.user-title{
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  margin: -10px 0;
}
.avatar{
  margin: 10px auto;
}
.comment-area{
  padding: 10px ;
}
</style>